<template>
	<Layout :showFooter="true">
		<template #title>编辑档案</template>

		<SectionTitle showLine>
			<template #title>
				<view class="iflex aic">
					擅长<image class="iflex sjx-icon" src="/static/image/lawyer/sjx.png"></image>
				</view>
			</template>
		</SectionTitle>
		<view class="iflex fill special-wrap">
			<view v-for="item of expertiseList" :key="item.dictCode" class="iflex aic jcc special-item"
				:class="{active:specials.includes(item.dictValue)}" @click.stop="tapSpecialItem(item.dictValue)">
				{{item.dictValue}}
			</view>
		</view>


		<SectionTitle showLine><template #title>简介</template></SectionTitle>
		<InfoBlock standard customStyle="margin-top:18rpx;">
			<uni-easyinput type="textarea" :inputBorder="false" v-model="formData.lawFirmDesc" placeholder="请输入简介"
				maxlength="500"></uni-easyinput>
			<view class="iflex fill jcfe" style="font-size: 28rpx; color:#909090;">{{formData.lawFirmDesc.length}}/500
			</view>
		</InfoBlock>

		<SectionTitle showLine><template #title>地址</template></SectionTitle>
		<InfoBlock standard customStyle="margin-top:18rpx;">
			<uni-easyinput type="textarea" :inputBorder="false" maxlength="100" v-model="formData.lawFirmAddress"
				placeholder="请输入地址"></uni-easyinput>
		</InfoBlock>


		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" type="primary" size="large" :fill="true"
					@click.stop="tapSubmit">提交</u-button>
			</view>
		</template>
	</Layout>
	<u-top-tips ref="tipsRef"></u-top-tips>
</template>

<script setup lang="ts" name="LawyerEditFile">
	import { ref } from 'vue';
	import { useShowTipMessage } from '@/hooks/util';
	import { getLawfirmDetail, saveArchive, getLawfirmExpertiseList } from '@/apis/lawfirm';
	import { onLoad } from '@dcloudio/uni-app';
	import type { AnyObj } from '@/types/global';
	import { isEmpty } from '@/utils/util';
	import { isResultSuccess } from '@/utils/http';

	const [tipsRef, showTipMessage] = useShowTipMessage();
	const expertiseList = ref<AnyObj[]>([]);
	let lawFirmId = '';
	const specials = ref<string[]>([]);
	const formData = ref({
		lawFirmId: '',
		special: '',
		lawFirmDesc: '',
		lawFirmAddress: '',
	})

	function tapSpecialItem(text : string) {
		if (specials.value.includes(text)) {
			specials.value = specials.value.filter(item => item !== text);
			return;
		}
		if (specials.value.length >= 3) {
			uni.showToast({
				icon: 'none',
				title: '最多选择3个'
			})
			return;
		}
		specials.value.push(text);
	}

	function loadData() {
		specials.value = [];
		expertiseList.value = [];
		getLawfirmExpertiseList().then((res) => {
			expertiseList.value = res?.data ?? [];
		});
		getLawfirmDetail(lawFirmId).then((res) => {

		});
		Promise.all([getLawfirmExpertiseList(), getLawfirmDetail(lawFirmId)]).then((posts) => {
			const [expertiseRes, detailRes] = posts;
			expertiseList.value = expertiseRes?.data ?? [];

			if (detailRes.code !== 200) {
				uni.showToast({
					icon: 'none',
					title: detailRes.msg ?? '服务器忙，请稍后再试'
				})
				return;
			}
			const data = detailRes.data ?? {};
			formData.value.special = data.special ?? '';
			formData.value.lawFirmDesc = data.lawFirmDesc ?? '';
			formData.value.lawFirmAddress = data.lawFirmAddress ?? '';
			specials.value = formData.value.special.split(',').filter((item : string) => !isEmpty(item) && expertiseList.value.some(e => e.dictValue === item))
		});
	}


	function tapSubmit() {
		const value = formData.value;
		if (specials.value.length <= 0) {
			showTipMessage('请选择擅长，1~3个以内', 'error');
			return;
		}

		if (isEmpty(value.lawFirmDesc)) {
			showTipMessage('请输入简介，长度 500 个字符以内', 'error');
			return;
		}

		if (value.lawFirmDesc.length > 500) {
			showTipMessage('简介长度 500 个字符以内', 'error');
			return;
		}

		if (isEmpty(value.lawFirmAddress)) {
			showTipMessage('请输入地址，长度 100 个字符以内', 'error');
			return;
		}

		if (value.lawFirmAddress.length > 100) {
			showTipMessage('地址长度 100 个字符以内', 'error');
			return;
		}

		saveArchive({ ...value, special: specials.value.join(',') }).then((res) => {
			if (!isResultSuccess(res)) return;
		});
	}


	onLoad((options) => {
		options = options as { lawFirmId : string; }
		lawFirmId = options.lawFirmId;
		formData.value.lawFirmId = lawFirmId;
		loadData();
	});
</script>

<style lang="scss">
	.sjx-icon {
		width: 12rpx;
		height: 10rpx;
		margin-left: 8rpx;
	}

	.special-wrap {
		flex-wrap: wrap;
		padding: 4rpx 32rpx 0 12rpx;
	}

	.special-item {
		margin: 20rpx 0 0 20rpx;
		height: 52rpx;
		padding: 0 22rpx;
		background: #EEEEEE;
		border-radius: 26rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		border: 1px solid #EEEEEE;

		&.active {
			border-color: #FF710A;
			color: #FF710A;
			background: #FFF1E8;
		}
	}
</style>